/*
 * @Author: yangrongxin
 * @Date: 2021-06-07 16:51:33
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-17 09:41:14
 */
import React, { useEffect, useState, useContext } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Canvas } from '@tarojs/components';
// import { AtIcon } from 'taro-ui';
// import lottie from 'lottie-miniprogram';
// import { debounce } from 'lodash';
// import likeJson from '@/const/like';
// import { likeArticle } from '../../../../service';
import VideoComponent from '../VideoComponent';
import styles from './index.module.less';

const VideoItem = ({
  articleId,
  title,
  subhead,
  content,
  timeInterval,
  cover,
  readCount,
  isHomeScroll, // 当前是首页的时候 展示收缩的样式
  extendWapperClass,
}) => {
  const goToDetail = () => {
    Taro.navigateTo({
      url: `/pages/PatientEducation/components/VideoContent/index?videoId=${content}&articleId=${articleId}`,
    });
  };

  if (isHomeScroll) {
    return (
      <View className={`${styles.videoItemHome} ${extendWapperClass}`} onClick={goToDetail}>
        <View className={styles.left}>
          <Text className="ellipsisText">{title}</Text>
          <Text className="ellipsisText">{subhead}</Text>
          <View>
            <Text>{readCount}播放</Text>
          </View>
        </View>
        <View className={styles.right}>
          <VideoComponent cover={cover} articleId={articleId} timeInterval={timeInterval} videoId={content} />
        </View>
      </View>
    );
  }

  return (
    <View className={`${styles.videoItem} ${extendWapperClass}`} onClick={goToDetail}>
      <Text>{title}</Text>
      <Text>{subhead}</Text>
      <VideoComponent cover={cover} articleId={articleId} timeInterval={timeInterval} videoId={content} />
      <View>
        <Text>{readCount}播放</Text>
      </View>
    </View>
  );
};

export default React.memo(VideoItem);
